<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>ajax异常处理</title>
	</head>
	<body>
        <button id="test">发送消息</button>
        <button id="test1">取消请求</button>
	</body>
	<script type="text/javascript">
        const btns  =document.querySelectorAll('button')
        let xhr = null;

        function getAjax(e){
             // 1.创建对象
            xhr = new XMLHttpRequest();
            //2 初始化，设置请求方法和url
            xhr.open('GET','http://localhost:8000/delay');
            //3 发送请求
            xhr.send();

            // 超时设置 2s
            xhr.timeout = 2000;

            // 超时回调
            xhr.ontimeout = function(){
                alert('网络超时，稍后重试');
            }
            //网络异常
            xhr.onerror = function(){
                // 可以断网测试一下
                alert('貌似出现了点故障');
            }

            xhr.onreadystatechange = function(){
                // 判断
                if(xhr.readyState === 4){

                        //判断响应状态码
                        if(xhr.status >= 200&&
                        xhr.status<300){
                            console.log(xhr.response);
                        }else{

                        }

                }
            }
        }

  
        btns[0].addEventListener('click',getAjax);
        btns[1].addEventListener('click',function(){
            //主动取消请求
            xhr.abort();
        });
        // testBtn.addEventListener('click',postAjax);

    </script>
</html>